<template>
	<view class="content">
		<view class="title">
			<text>欢迎您</text>
		</view>
		<view class="uname_box">
			<span class="iconfont icon-jurassic_user"></span>
			<input v-model="username" type="text" name="username" placeholder="账号">
		</view>
		<view class="pwd_box">
			<span class="iconfont icon-mima"></span>
			<input v-model="pwd" v-if="isshow" type="text" placeholder="密码" />
			<input v-model="pwd" v-else password placeholder="密码" />
			<span :class="isshow ? 'eye iconfont icon-yanjing_xianshi' : 'eye iconfont icon-yanjing_yincang'"
				@click="showPwd()"></span>
		</view>
		<view class="botton_box">
			<view class="login_btn" @click="goLogin">登录</view>
			<view class="login_other">
				<view class="login_icon">
					<view @click="login_wx()">
						<text class="iconfont icon-weixin"></text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import canYouCommit from "../../tools/canYouCommit/index.js";
	import doErro from '../../tools/doErro/index.js';
	import store from '@/store/index.js'; //需要引入store
	const login = uniCloud.importObject('rc_login');
	export default {
		data() {
			return {
				username: '',
				pwd: '',
				isshow: false
			};
		},
		methods: {
			login_wx() {
				let _self = this;
				uni.login({
					provider: 'weixin',
					async success(data) {
						try {
							const login_res = await login.wx_login(data.code);
							const isHaveUser = await login.getWxUser(login_res.data.openid);
							if (login_res.data.openid && login_res.data.session_key) {
								if (isHaveUser.affectedDocs) {
									getApp().globalData.uid = isHaveUser.data[0]._id;
									getApp().globalData.isHave = isHaveUser.data[0].ishave;
									store.commit('doavatar', {
										avatar: isHaveUser.data[0].avatar
									});
									store.commit("douname", {
										uname: isHaveUser.data[0].name
									});
									store.commit("dotoken", {
										token: isHaveUser.data[0]._id
									});
									uni.switchTab({
										url: "/pages/home/home"
									})
								} else {
									_self.jump('wx', login_res.data.openid)
								}
							}
						} catch (e) {
							console.log(e);
						}
					}
				})
			},
			jump(method, openid) {
				uni.navigateTo({
					url: '/pages/zhuce/zhuce?method=' + method + "&openid=" + openid
				})
			},
			showPwd() {
				this.isshow = !this.isshow
			},
			goLogin() {
				// let timer;
				// clearTimeout(timer);
				if (canYouCommit.doCommit({
						uname: this.username,
						pwd: this.pwd,
					})) {
					uni.showLoading({
						title: "登录中...",
						mask: true
					});
					login.baseLogin({
						name: this.username,
						pwd: this.pwd,
					}).then((res) => {
						if (res.affectedDocs == 1) {
							getApp().globalData.uid = res.data[0]._id;
							getApp().globalData.isHave = res.data[0].ishave;
							getApp().globalData.avatar = res.data[0].avatar;
							getApp().globalData.uname = res.data[0].name;
							store.commit('doavatar', {
								avatar: res.data[0].avatar
							});
							store.commit("douname", {
								uname: res.data[0].name
							});
							store.commit("dotoken", {
								token: res.data[0]._id
							});
							uni.hideLoading();
							uni.switchTab({
								url: "/pages/home/home"
							})
						} else {
							uni.hideLoading();
							doErro.showErro('noname');
						}
					}, (err) => {
						doErro.showErro(500);
						uni.hideLoading();
					});
				}
			}
		}
	}
</script>
<style lang="scss" scoped>
	@import url('../../public/animation.css');
	.content {
		width: 100%;
		overflow: hidden;
		&::before {
			display: block;
			content: '';
			height: 1200rpx;
			width: 100%;
			background-color: #00aa7f;
			border-radius: 120rpx;
			position: relative;
			animation: dropdown 2s;
			animation-timing-function: ease-in-out;
			animation-fill-mode: forwards;
		}
		.title {
			position: absolute;
			top: 200rpx;
			left: 100rpx;
			animation: hide 3s;
			animation-timing-function: ease-in-out;
			animation-fill-mode: forwards;
			text {
				color: #F9FFF9;
				font-size: 120rpx;
			}
		}
		.uname_box,
		.pwd_box {
			width: 80%;
			height: 90rpx;
			box-sizing: border-box;
			position: absolute;
			top: 800rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			color: #00aa7f;
			font-size: 32rpx;
			border: 2rpx solid #a1a5a1;
			border-radius: 30rpx;
			padding: 0rpx 20rpx;
			input {
				margin-left: 20rpx;
				height: 90rpx;
				width: 80%;
			}
			animation: hide 3s;
			animation-timing-function: ease-in-out;
			animation-fill-mode:forwards;
		}
		.pwd_box {
			position: absolute;
			top: 960rpx;

			.eye {
				padding-left: 20rpx;
			}
		}
		.botton_box {
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			.login_btn {
				width: 40%;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				background-color: #00aa7f;
				border-radius: 30rpx;
				color: #F9FFF9;
				font-size: 40rpx;
			}
			.font_btn {
				width: 100%;
				display: flex;
				flex-direction: row;
				justify-content: center;
				margin-top: 40rpx;

				view {
					color: #00aa7f;
					padding: 0px 20rpx;
					text-decoration: underline;
				}
			}
			.login_other {
				display: flex;
				flex-direction: column;
				width: 100%;
				.login_icon {
					width: 100%;
					display: flex;
					flex-direction: row;
					justify-content: space-around;
					margin-top: 80rpx;
					text {
						font-size: 60rpx;
						color: #00aa7f;
					}
				}
			}
			animation: hide 3s;
			animation-timing-function: ease-in-out;
			animation-fill-mode:forwards;
		}
	}
</style>